<template>
    <div class="flex_col p10 card mt5" v-if="status != null">
        <label class="flex_center_self">设备状态</label>
        <div class="flex_row_center mt5">
            <label>软件版本:</label>
            <label>{{ status.version }}</label>

            <label class="ml10">电机adc:</label>
            <label>{{ status.adc }}</label>

            <label class="ml10">温度传感器:</label>
            <label>{{ status.pt100 }}℃</label>

            <el-button @click="update" class="ml5" type="primary">更新</el-button>
        </div>
        <div class="flex_row mt5" style="flex-wrap: wrap; max-width: 60vw;">
            <LabelStateParts v-for="(item, index) in DEVICE_SENSORS" :key="index" :text="item" 
            :state=" (status.sw_sensor & (0x01 << index)) != 0 " class="ml5 mt5"/>
        </div>
    </div>
</template>

<script lang="ts" setup>
import LabelStateParts from '@/components/LabelStateParts.vue';
import { DEVICE_SENSORS, type DeviceStatus } from '@/service/models';
import remote from '@/service/remote';
import { runAction } from '@/utils/ui';
import { ref } from 'vue';


const status = ref<DeviceStatus | null>(null);

async function update() {
    runAction('设备状态', '更新', async () => {
        status.value = await remote.deviceStatus();
    })
}

update();

</script>
